<template>
  <div>
    <el-col class="add-btn" :span="4">
      <el-button type="primary" @click="centerDialogVisible4 = true">新增</el-button>
    </el-col>
    <!-- 表格列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" :index="indexMethod" align="center"></el-table-column>
      <el-table-column prop="competition_name" label="赛季名称" align="center"></el-table-column>
      <el-table-column prop="holding_time" label="举办时间" align="center"></el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="editClick(scope.row); centerDialogVisible3 = true"
            size="small"
            class="edit-btn"
          >编辑</el-button>
          <el-button @click="deleteClick(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹框 -->
    <el-dialog title="编辑赛季" :visible.sync="centerDialogVisible3" width="30%" center>
      <div class="form-list">
        <el-form ref="editForm" :model="editForm" label-width="80px">
          <el-form-item label="赛季名称">
            <el-input v-model="editForm.competition_name"></el-input>
          </el-form-item>

          <el-form-item label="举办时间">
            <el-input v-model="editForm.holding_time"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit(editForm); centerDialogVisible3 = false">提交</el-button>
      </span>
    </el-dialog>

    <!-- 新增弹框 -->
    <el-dialog title="新增赛季" :visible.sync="centerDialogVisible4" width="30%" center>
      <div class="form-list">
        <el-form ref="addForm" :model="addForm" label-width="80px">
          <el-form-item label="赛季名称">
            <el-input v-model="addForm.competition_name" placeholder="请输入赛季名称"></el-input>
          </el-form-item>

          <el-form-item label="举办时间" class="time">
            <el-date-picker
              v-model="addForm.holding_time"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit(addForm); centerDialogVisible4 = false">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "add",
  data() {
    return {
      // 新增弹框默认状态
      centerDialogVisible3: false,
      centerDialogVisible4: false,

      // 表格列表数据
      tableData: [],
      options: [],

      editForm: {
        competition_name: "",
        holding_time: "",
        Venue: "",
        id: ""
      },

      addForm: {
        competition_name: "",
        holding_time: "",
        Venue: ""
      }
    };
  },
  mounted: function() {
    this.competitionInfo();
    this.schoolInfo();
  },

  methods: {
    // 获取举办赛季信息
    competitionInfo() {
      let that = this;
      that.$api
        .getCompetitionInfo()
        .then(res => {
          // console.log(res)
          that.tableData = res.data.results;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取校区信息
    schoolInfo() {
      let that = this;
      that.$api
        .getSchoolInfo()
        .then(res => {
          // console.log(res);
          let schoolData = res.data;
          that.options = schoolData;
          // console.log(that.options);
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: `还未设置校区`
          });
        });
    },

    // =======================================================
    // 编辑赛季--获取行数据
    editClick(row) {
      // console.log(row);
      let that = this;
      that.editForm.competition_name = row.competition_name;
      that.editForm.holding_time = row.holding_time;
      that.editForm.Venue = row.Venue;
      that.editForm.id = row.id;
    },

    //  编辑赛季--数据提交
    onSubmit(editForm) {
      // console.log(editForm)
      let that = this;
      let PostData = this.$qs.stringify({
        competition_name: editForm.competition_name,
        holding_time: editForm.holding_time,
        Venue: editForm.Venue
      });

      that.$api
        .CompetitionListItemInfo(editForm.id, PostData)
        .then(res => {
          if (res.status == 200) {
            that.competitionInfo();
            that.$message({
              type: "success",
              message: "修改成功!"
            });
          }
        })
        .catch(err => {
          console.log("err");
        });
    },

    // =======================================================

    // 新增赛季
    addSubmit(addForm) {
      let that = this;
      let PostData = this.$qs.stringify({
        competition_name: addForm.competition_name,
        holding_time: addForm.holding_time,
        school: addForm.school,
        Venue: addForm.Venue
      });
      that.$api
        .addCompetitionInfo(PostData)
        .then(res => {
          console.log(res);
          if (res.status == 201) {
            that.competitionInfo();
          }
        })
        .catch(err => {
          console.log("err");
        });
    },

    // =======================================================

    // 删除赛事
    deleteClick(obj) {
      // console.log(obj)
      let that = this;
      that.$api
        .deletCompetitionInfo(obj.id, { is_active: 0 })
        .then(res => {
          that.competitionInfo();
          setTimeout(function() {
            that.$message(
              {
                type: "success",
                message: "删除成功!"
              },
              2000
            );
          });
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 索引排序
    indexMethod(index) {
      return index * 1;
    }
  }
};
</script>


<style scoped>
.header {
  text-align: center;
  font-weight: 550;
  font-size: 20px;
}
.container {
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

.el-select {
  display: block;
  /* text-align: center; */
}

.add-btn {
  margin: 30px 30px 30px 10px;
  padding-right: 120px;
}

.time .el-input {
  display: block;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
}

/* .el-input__prefix{
  display: block!important;
  position: absolute!important;
  top:0px!important;
} */
/* .el-input__icon{
  position: absolute;
  top:-12px;
} */
</style>

